﻿@using MvcJqGrid
@{
    ViewBag.Title = "Categories";
    
}

@section scripts{
    <script type="text/javascript">
        function CategoryDetails(id) {
            var url = '@Url.Action("CategoryDetails", "Inventory")/?id=' + id;
            $("#dialogEdit").dialog({
                autoOpen: true,
                resizable: false,
                height: 300,
                show: { effect: 'drop', direction: "up" },
                width: 450,
                modal: true,
                draggable: true,
                open: function (event, ui) {
                    $(this).load(url);
                }, close: function (event, ui) {
                    $(this).dialog('close');
                }
            });
        }

        function DeleteCategory(id) {
            var url = '@Url.Action("DeleteCategory", "Inventory")/?id=' + id;
            $("#dialogConfirm").dialog({
                autoOpen: true,
                resizable: false,
                height: 170,
                show: { effect: 'drop', direction: "up" },
                width: 350,
                modal: true,
                draggable: true,
                buttons: {
                    "OK": function () {
                        $(this).dialog("close");
                        window.location = url;
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });
        }

        function EditDeleteProductCategory(cellvalue, options, rowobject) {
            return '<a onclick="return CategoryDetails(' + options.rowId + ')" href="#"><div class="ui-icon ui-icon-pencil" style="display:inline-block"></div></a>' +
                   '<a onclick="return DeleteCategory(' + options.rowId + ')" href="#"><div class="ui-icon ui-icon-trash" style="display:inline-block"></div></a>';
        }

        function reloadGrid(refresh) {
            if (refresh == true) {
                //Set initial values of your filters here
                $("#txtName").val("");
                $("#txtDescripton").val("");
                //reload grid's page 1 instead of current page
                $("#CategoryGrid").trigger("reloadGrid", { page: 1 });
            }
            else {

                var myfilter = { groupOp: "AND", rules: [] };
                myfilter.rules.push({ field: "Name", op: "gt", data: $("#txtName").val() });
                myfilter.rules.push({ field: "Description", op: "lt", data: $("#txtDescripton").val() });
                myfilter.rules.push({ field: "Test", op: "bw", data: "test" });

                var grid = $("#CategoryGrid");
                grid.jqGrid({
                    search: true,
                    postData: { filters: JSON.stringify(myfilter) }
                });

                grid[0].p.search = myfilter.rules.length > 0;
                $.extend(grid[0].p.postData, { filters: JSON.stringify(myfilter) });
                grid.trigger("reloadGrid", [{ page: 1 }]);
            }
        }
    </script>
}
<div id="dialogEdit" style="display: none">
</div>

<div id="dialogConfirm" title="Delete Category" style="display: none">
    <p>
        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
        Are you sure to delete ?
    </p>
</div>

<a href="#" onclick="return CategoryDetails()">Add Category</a>
<br />
@*<fieldset>
    <legend>Search Category</legend>


</fieldset>*@
<table width="100%" height="170px" class="ui-jqgrid ui-widget ui-widget-content ui-corner-all rfloat">
    <tr>
        <th colspan="4" class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix">Search Category
        </th>
    </tr>
    <tr>
        <th>Name:
        </th>
        <td>
            <input type="text" id="txtName" value="" class="inp-form" />
        </td>
        <th>Description:
        </th>
        <td>
            <input type="text" id="txtDescripton" value="" class="inp-form" />
        </td>
    </tr>
    <tr>
        <td></td>
        <td colspan="3">
            <input type="button" id="lnkSearch" class="form-submit" value="Search" onclick="reloadGrid(false);" />

        </td>
    </tr>
</table>
<div style="clear: both; height: 10px;">
</div>

@(Html.Grid("CategoryGrid")
    .SetRequestType(MvcJqGrid.Enums.RequestType.Post)
    .SetJsonReader(new MvcJqGrid.DataReaders.JsonReader { Id = "ID", RepeatItems = false })
    .SetShowAllSortIcons(true)
    .SetAutoWidth(true)
    .SetCaption("Product Category")
    .AddColumn(new Column("Name"))
    .AddColumn(new Column("Description"))
    .AddColumn(new Column("Action").SetCustomFormatter("EditDeleteProductCategory").SetSortable(false).SetWidth(50).SetAlign(Align.Right))
    .SetUrl(Url.Action("CategoryGrid", "Inventory"))
    .SetRowNum(10)
    .SetRowList(new[] { 10, 15, 20, 50 })
    .SetViewRecords(true)
    .SetPager("pager")
    )


